<template>
  <div class="minesettings">
    <div class="mines_tou">
      <p class="min_p1">
        <img @click="props.data(1)" class="img1" src="@/assets/fanhui.png">
        <span class="min_span1">修改昵称</span>
        <span class="min_span2">保存</span>
      </p>
    </div>
        <van-field
        v-model="value2"
        clearable
        class="van_field"
        placeholder="请填写昵称"
        />
        <p class="p1">4-20个字符，可由中英文/数字/下划线组成</p>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "@vue/reactivity";
const value2=ref("")
const props=defineProps(["data"])

</script>

<style scoped>
.p1{font-size: 10px;color: #999999;margin: 5px 0px 0px 15px;}
.van_field{width: 390px;border-bottom:0;}
.van_field:first{border-bottom:1px solid red;}
.minesettings{width: 390px;min-height: 800px;background-color: #f2f2f2;}
.mines_tou{width: 390px;height: 55px;line-height: 55px;border-bottom: 2px solid #f2f2f2;background-color: #ffff;}
.img1{width: 9px;height: 14px;vertical-align: middle;margin-left: 20px;}
.img1:hover{cursor: pointer;}
.min_span1{vertical-align: middle;margin-left: 136px;font-size: 18px;}
.min_span2{vertical-align: middle;margin-left: 120px;color: red;font-size: 14px;}
.min_p1{vertical-align: middle}
</style>